<template>
	<el-main>
		<el-row>
			<el-button type="primary" size="medium" icon="el-icon-edit" @click="toCreate">
				新增角色
			</el-button>
		</el-row>
		<el-table :data="tableData" border style="margin-top: 10px;">
			<el-table-column
				prop="roleName"
				label="角色名称">
			</el-table-column>
			<el-table-column
				prop="roleUseNum"
				label="使用数量">
				<template slot-scope="scope">
					{{scope.row.roleUseNum}}人
				</template>
			</el-table-column>
			<el-table-column
				prop="createTime"
				label="创建时间">
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1" style="color:green;">
						启用
					</span>
					<span v-if="scope.row.status==2" style="color:red;">
						停用
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="196">
				<template slot-scope="scope">
					<el-button type="primary" size="small" 
						@click="getDetail(scope.row.roleId)">
						查看详情
					</el-button>
					<el-button type="danger" size="small" 
						@click="deleteRole(scope.row.roleId,scope.$index)">
						删除角色
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-main>
</template>

<script>
	import { getRoleList,deleteRole } from '@/api/role.js'
	export default {
		data() {
			return {
				tableData: []
			}
		},
		mounted() {
			this.getRoleList();
		},
		methods: {
			// 获取列表
			getRoleList() {
				let _this = this;
				getRoleList().then(function(res){
					if (res.code === 200) {
						_this.tableData = res.data;
					} else {
						_this.$message.error(res.msg);
					}
				})
			},
			// 查看详情
			getDetail(roleId) {
				this.$router.push({
					path: './detail',
					query: {'roleId': roleId}
				});
			},
			// 新增
			toCreate() {
				this.$router.push('./detail');
			},
			// 删除角色
			deleteRole(roleId,index) {
				this.$confirm('此操作将永久删除该角色，是否继续？', 
				'提示', {type: 'warning'}).then(() => {
					let _this = this;
					deleteRole({'roleId': roleId}).then(function(res){
						if (res.code === 200) {
							_this.tableData.splice(index, 1);
							_this.$message({
								message: res.msg,
								type: 'success'
							});
						} else {
							_this.$message.error(res.msg);
						}
					})
				}).catch(() => {});
			}
		}
	}
</script>
